<!DOCTYPE html>

<html>
<head>
    <title>WRF Domain Wizard</title>
    <meta charset="utf-8" />
    <meta name="description" content="HTML implementation of GUI for the WRF Preprocessor System (WPS) and namelist.input" />
    <meta name="keywords" content="WRF,WPS,WRF Domain Wizard" />
    <meta name="author" content="Jiri Richter" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />


    <link rel="stylesheet" href="build/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="build/lib/leaflet.css" />
    <link rel="stylesheet" href="build/lib/all.min.css" />
    <link rel="stylesheet" href="build/lib/leaflet-sidebar.min.css" />
    <link rel="stylesheet" href="build/lib/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="build/lib/bootstrap-select.min.css" />
    
    <link rel="stylesheet" href="build/css/wrf-domain-wizard.css?1731901564350" />

    <link rel="icon" href="build/img/globe_32x32.png" />

    
</head>
<body>

    <div id="map">

        <div id="sidebar" class="leaflet-sidebar collapsed">
            <!-- Nav tabs -->
            <div class="leaflet-sidebar-tabs">
                <ul role="tablist"> <!-- top aligned tabs -->
                    <li title="WRF domains"><a href="#domains" role="tab"><i class="fas fa-vector-square"></i></a></li>
                    <li title="Satellite elevation data overlay"><a href="#elevation-data" role="tab"><i class="fas fa-satellite"></i></a></li>
                    <li title="Geographic files"><a href="#geographic-files" role="tab"><i class="fas fa-map-marked-alt"></i></a></li>
                    <li title="Domain wizard settings"><a href="#settings" role="tab"><i class="fas fa-cog"></i></a></li>
                    <li title="About domain wizard"><a href="#about" role="tab"><i class="fas fa-info-circle"></i></a></li>
                </ul>
        
                <ul role="tablist"> <!-- bottom aligned tabs -->
                </ul>
            </div>
        
            <!-- Tab panes -->
            <div class="leaflet-sidebar-content">
                <div class="leaflet-sidebar-pane" id="about">
    <h1 class="leaflet-sidebar-header">
        About
        <div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
    </h1>
    <p>
        WRF Domain Wizard is a single-page application to simplify creation, visualization and modification of <a href="https://www2.mmm.ucar.edu/wrf/users/wrf_users_guide/build/html/wps.html#" target="_blank">WRF Preprocessing System (WPS)</a> namelist.wps input file.
    </p>

    <div class="font-weight-bold mt-1">Usefull Links:</div>

    <div class="list-group">
        <a href="https://github.com/JiriRichter/WRFDomainWizard" target="_blank" class="list-group-item list-group-item-action list-group-item-primary"><i class="fab fa-github mr-1"></i>GitHub Source Repository</a>
        <a href="https://www2.mmm.ucar.edu/wrf/users/wrf_users_guide/build/html/index.html" target="_blank" class="list-group-item list-group-item-action">WRF User's Guide</a>
        <a href="https://www2.mmm.ucar.edu/wrf/users/wrf_users_guide/build/html/wps.html#wps-namelist-variables" target="_blank" class="list-group-item list-group-item-action">WPS Namelist Variables</a>
        <a href="https://www2.mmm.ucar.edu/wrf/users/namelist_best_prac_wps.html" target="_blank" class="list-group-item list-group-item-action">Best Practices: namelist.wps</a>
        <a href="https://www2.mmm.ucar.edu/wrf/users/namelist_best_prac_wrf.html" target="_blank" class="list-group-item list-group-item-action">Best Practices: namelist.input</a>
    </div>
</div>
                <div class="leaflet-sidebar-pane" id="elevation-data">
    <h1 class="leaflet-sidebar-header">Elevation Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
    <div class="elevation-data-overlays">
    </div>
    <div class="leaflet-sidebar-pane-bottom">
        <button role="button" class="btn btn-sm btn-secondary">Clear History</button>
    </div>
</div>
                <div class="leaflet-sidebar-pane" id="domains">
    <h1 class="leaflet-sidebar-header">Domains<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span></h1>

    <div class="wps-top-buttons">
        <button type="button" class="btn btn-sm btn-outline-secondary" id="button-wps-new"><i class="far fa-object-group"></i></i>New</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="button-wps-open"><i class="fas fa-folder-open"></i>Open</button>
        <input id="file-open" type="file" style="display: none;" />
    </div>

    <div id="container-wps-form" style="display: none">
        <form id="wps-form" class="needs-validation" novalidate>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text all-domains" title="A character string set to either 'ARW' or 'NMM' that tells the WPS which dynamical core the input data are being prepared for.">wrf_core</span>
                </div>
                <input name="wrf_core" type="text" class="form-control" value="ARW" disabled>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text all-domains" title="Projection of the simulation domain">map_proj</span>
                </div>
                <select name="map_proj" class="form-control" aria-describedby="basic-addon1">
                    <option value="lambert" data-title="The Lambert conformal projection is well-suited for mid-latitude domains">lambert</option>
                    <option value="mercator" data-title="The Mercator projection is good for low-latitude domains or domains with predominantly west-east extent">mercator</option>
                    <option value="polar" data-title="The polar stereographic projection is best suited for high-latitude WRF domains">polar</option>
                    <option value="lat-lon" data-title="The cylindrical equidistant projection is required for global simulations, although in its rotated aspect (i.e., when pole_lat, pole_lon, and stand_lon are changed from their default values) it can also be well-suited for regional domains anywhere on the earth's surface">lat-lon</option>
                </select>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text all-domains-2" title="A real value specifying the latitude part of a (latitude, longitude) location whose (i,j) location in the simulation domain is known. For ARW, ref_lat gives the latitude of the center-point of the coarse domain by default (i.e., when ref_x and ref_y are not specified). For NMM, ref_lat always gives the latitude to which the origin is rotated.">ref_lat</span>
                    <span class="input-group-text all-domains-2" title="A real value specifying the longitude part of a (latitude, longitude) location whose (i, j) location in the simulation domain is known. For ARW, ref_lon gives the longitude of the center-point of the coarse domain by default (i.e., when ref_x and ref_y are not specified). For NMM, ref_lon always gives the longitude to which the origin is rotated. For both ARW and NMM, west longitudes are negative, and the value of ref_lon should be in the range [-180, 180].">ref_lon</span>
                </div>
                <input name="ref_lat" type="number" class="form-control" aria-describedby="basic-addon1" required min="-180" max="180" step="0.001">
                <input name="ref_lon" type="number" class="form-control" aria-describedby="basic-addon1" required min="-180" max="180" step="0.001">
                <div class="invalid-feedback">Select value between -180 and 180</div>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text all-domains" title="A real value specifying, for ARW, the first true latitude for the Lambert conformal projection, or the only true latitude for the Mercator and polar stereographic projections. For NMM, truelat1 is ignored.">truelat1</span>
                </div>
                <input name="truelat1" type="number" class="form-control" aria-describedby="basic-addon1" required min="-180" max="180" step="0.001">
                <div class="invalid-feedback">Select value between -180 and 180</div>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text all-domains" title="A real value specifying, for ARW, the second true latitude for the Lambert conformal conic projection. For all other projections, truelat2 is ignored.">truelat2</span>
                </div>
                <input name="truelat2" type="number" class="form-control" required min="-180" max="180" step="0.001">
                <div class="invalid-feedback">Select value between -180 and 180</div>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text all-domains" title="A real value specifying, for ARW, the longitude that is parallel with the y-axis in the Lambert conformal and polar stereographic projections. For the regular latitude-longitude projection, this value gives the rotation about the earth's geographic poles. For NMM, stand_lon is ignored.">stand_lon</span>
                </div>
                <input name="stand_lon" type="number" class="form-control" required min="-180" max="180" step="0.001">
                <div class="input-group-append">
                    <button id="stan-lon-plus" type="button" class="btn btn-light" title="Rotate lambert grid left by 5 degrees"><i class="fas fa-undo"></i></button>
                    <button id="stan-lon-minus" type="button" class="btn btn-light" title="Rotate lambert grid right by 5 degrees"><i class="fas fa-undo" style="transform:scaleX(-1)"></i></button>
                </div>
                <div class="invalid-feedback">Select value between -180 and 180</div>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text all-domains-2" title="For the latitude-longitude projection for ARW, the latitude of the North Pole with respect to the computational latitude-longitude grid in which -90.0 degrees latitude is at the bottom of a global domain, 90.0 degrees latitude is at the top, and 180.0 degrees longitude is at the center.">pole_lat</span>
                    <span class="input-group-text all-domains-2" title="For the latitude-longitude projection for ARW, the longitude of the North Pole with respect to the computational lat/lon grid in which -90.0 degrees latitude is at the bottom of a global domain, 90.0 degrees latitude is at the top, and 180.0 degrees longitude is at the center.">pole_lon</span>
                </div>
                <input name="pole_lat" type="number" class="form-control" aria-describedby="basic-addon1" min="-180" max="180" step="0.001" value="90.000">
                <input name="pole_lon" type="number" class="form-control" aria-describedby="basic-addon1" min="-180" max="180" step="0.001" value="0">
                <div class="invalid-feedback">Select value between -180 and 180</div>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text" title="A real value specifying the grid distance in the x-direction where the map scale factor is 1. For ARW, the grid distance is in meters for the 'polar', 'lambert', and 'mercator' projection, and in degrees longitude for the 'lat-lon' projection; for NMM, the grid distance is in degrees longitude.">dx</span>
                    <span class="input-group-text" title="A real value specifying the nominal grid distance in the y-direction where the map scale factor is 1. For ARW, the grid distance is in meters for the 'polar', 'lambert', and 'mercator' projection, and in degrees latitude for the 'lat-lon' projection; for NMM, the grid distance is in degrees latitude.">dy</span>
                </div>
                <input name="dx" type="number" class="form-control" aria-describedby="basic-addon1" required min="1">
                <input name="dy" type="number" class="form-control" aria-describedby="basic-addon1" required min="1" disabled>
                <div class="input-group-append">
                    <button id="div-3" type="button" class="btn btn-light" title="Divide by 3"><i class="fas fa-divide"></i></button>
                    <button id="div-2" type="button" class="btn btn-light" title="Divide by 2" style="font-size:smaller;"><i class="fas fa-divide"></i></button>
                    <button id="mul-2" type="button" class="btn btn-light" title="Multiply by 2" style="font-size:smaller;"><i class="fas fa-times"></i></button>
                    <button id="mul-3" type="button" class="btn btn-light" title="Multiply by 3"><i class="fas fa-times"></i></button>
                </div>
            </div>
            <div id="grid-error" class="invalid-feedback">Select value higher than 100</div>
            <div id="grids-header" class="btn-toolbar justify-content-between border-bottom align-items-end mt-2">
                <h5>Grids</h5>
                <div>
                    <div class="btn-group btn-group-sm" role="group">
                        <button data-action="add-moad" type="button" class="btn btn-light" title="Add parent grid">
                            <i class="fas fa-sign-in-alt"></i>
                        </button>
                        <button data-action="remove-moad" type="button" class="btn btn-light" title="Remove grid and make its nest the top most grid">
                            <i class="fas fa-sign-out-alt"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div id="grids">
                <div id="grid_template" class="container-grid" style="display: none">
                    <div class="btn-toolbar justify-content-between align-items-end grid-header" role="toolbar">
                        <div>
                            <label class="grid-label">d01</label>
                        </div>
                        <div>
                            <div class="btn-group btn-group-sm" role="group">
                                <button data-action="remove-nest" type="button" class="btn btn-light" title="Remove nest and its nests">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                                <button data-action="add-nest" type="button" class="btn btn-light" title="Add nest">
                                    <i class="far fa-plus-square"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text" style="width: 139px" title="The nesting ratio relative to the domain's parent">parent_grid_ratio</span>
                        </div>
                        <input name="parent_grid_ratio" type="number" class="form-control" required min="1" max="10" />
                        <div data-val-for="parent_grid_ratio" class="invalid-feedback">Select value between 1 and 10</div>
                    </div>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text" style="width: 100px" title="The x-coordinate of the lower-left corner of the nest in the parent unstaggered grid. For the coarsest domain, a value of 1 should be specified.">i_parent_start</span>
                            <span class="input-group-text" style="width: 40px" title="The y-coordinate of the lower-left corner of the nest in the parent unstaggered grid. For the coarsest domain, a value of 1 should be specified.">j</span>
                        </div>
                        <input name="i_parent_start" type="number" class="form-control" required min="1" />
                        <input name="j_parent_start" type="number" class="form-control" required min="1" />
                        <div data-val-for="i_parent_start" class="invalid-feedback"></div>
                        <div data-val-for="j_parent_start" class="invalid-feedback"></div>
                    </div>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text" style="width: 70px" title="Nest's full west-east dimension. For nested domains, e_we must be one greater than an integer multiple of the nest's parent_grid_ratio (i.e., e_we = n*parent_grid_ratio+1 for some positive integer n).">e_we</span>
                            <span class="input-group-text" style="width: 70px" title="Nest's full south-north dimension. For nested domains, e_sn must be one greater than an integer multiple of the nest's parent_grid_ratio (i.e., e_sn = n*parent_grid_ratio+1 for some positive integer n).">e_sn</span>
                        </div>
                        <input name="e_we" type="number" class="form-control" required min="10" />
                        <input name="e_sn" type="number" class="form-control" required min="10" />
                        <div data-val-for="e_we" class="invalid-feedback"></div>
                        <div data-val-for="e_sn" class="invalid-feedback"></div>
                    </div>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1" style="width: 139px" title="A corresponding resolution or list of resolutions separated by + symbols of source data to be used when interpolating static terrestrial data to the nest's grid.">geog_data_res</span>
                        </div>
                        <span class="d-inline-block form-control" data-name="geog_data_res"></span>
                        <div class="input-group-append">
                            <button data-action="geog-data-res-edit" class="btn btn-light" type="button" title="Edit geog_data_res"><i class="fas fa-edit"></i></button>
                        </div>
                    </div>
                    <table class="table-grid-corners" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th>corners (lat,lon)</th>
                                <th>W</th>
                                <th>E</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>N</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>S</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="leaflet-sidebar-pane-bottom">
                <button id="update-domain" type="button" class="btn btn-primary btn-sm">Update</button>
                <button type="button" class="btn btn-sm btn-primary" id="button-wps-save"><i class="fas fa-save mr-1"></i>Save</button>
                <button id="reset-domain" type="button" class="btn btn-secondary btn-sm">Reset</button>
                <button id="save-png" type="button" class="btn btn-info btn-sm" title="Capture an image of current map view"><i class="fas fa-camera"></i></button>
                <button id="button-namelist-input" type="button" class="btn btn-info btn-sm" title="Edit namelist.input">namelist.input</button>
            </div>
        </form>
    </div>
</div>

                <div class="leaflet-sidebar-pane" id="geographic-files">
    <h1 class="leaflet-sidebar-header">
        Geographic Files
        <span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
    </h1>
    <div class="alert alert-sm alert-info mt-2" role="alert">
        <p>
        Use this tab to display geographic features from various data files. 
        This is meant to aid in designing WRF domains based on the locations of the displayed features. 
        </p>
        <p>
        The tool currently supports GeoJSON, KMZ, KML, GPX, and WPT file formats. If additional file format is needed, please, submit a feature request on the project <a href="https://github.com/JiriRichter/WRFDomainWizard/issues" target="_blank">GitHub issues page</a>.
        </p>
    </div>
    <div class="mt-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" id="button-geographic-file-remove"><i class="fas fa-trash-alt mr-1"></i>Remove All</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="button-geographic-file-add"><i class="fas fa-folder-open mr-1"></i>Add File</button>
        <input id="input-geographic-file" type="file" style="display: none;" />
    </div>
    <div id="geographic-file-layers" class="mt-2">
    </div>
</div>
                <div class="leaflet-sidebar-pane" id="settings">
    <h1 class="leaflet-sidebar-header">
        Settings
        <span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
    </h1>
    <div class="my-2">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" name="showGraticule">
            <label class="form-check-label" for="showGraticule">Show Graticule</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" name="showGeographicLines">
            <label class="form-check-label" for="showGeographicLines">Show Georaphic Lines</label>
        </div>
        <div class="form-group mt-2">
            <label class="mb-0" for="minGridDistanceMeters">Min DX/DY in Meters</label>
            <input class="form-control form-control-sm" type="number" value="" name="minGridDistanceMeters">
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" name="allowDifferentDxDy">
            <label class="form-check-label" for="showGeographicLines">Allow different DX and DY values</label>
        </div>
    </div>
    <div class="leaflet-sidebar-pane-bottom">
        <button id="reset-settings" type="button" class="btn btn-danger btn-sm" title="Resets settings to their default values">Reset</button>
    </div>
</div>
            </div>
        </div>
    </div>

    <div id="message-box-dialog" class="modal fade" role="dialog">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-circle text-danger"></i>
                    <span class="ml-1"></span>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="message-box-text"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="message-box-dialog-templates" style="display: none;">
    <div template="global-error">
        <div class="global-error">
            <p>
                The WRF domain wizard encountered an unexpected error. To help improve this tool, please, create an <a href="https://github.com/JiriRichter/WRFDomainWizard/issues" target="_blank">issue on GitHub</a> using the form below.
            </p>
            <form class="needs-validation" novalidate>
                <div class="form-group">
                    <h6>Error:</h6>
                    <textarea name="error-details" class="form-control" readonly></textarea>
                </div>
                <div class="form-group">
                    <h6>[Required] Repro Steps:</h6>
                    <textarea name="repro-steps" class="form-control" required placeholder="Steps to reproduce the issue" minlength="10"></textarea>
                    <div class="invalid-feedback">
                        Please provide steps to reproduce the issue.
                    </div>
                </div>
            </form>
            <a id="create-github-issue" class="btn btn-primary my-2" href="#" role="button" target="_blank">Create Issue</a>
        </div>
    </div>
</div>
    <div id="geog-data-res-dialog" class="modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <div>
                    <h5 id="geog-title" class="modal-title">geog_data_res</h5>
                </div>
                <div style="display:flex">
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text all-domains">WRF version</span>
                        </div>
                        <select class="form-control"></select>
                    </div>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
            </div>
            <div class="modal-body" style="position: center">
                <input id="geog-data-res" type="text" class="form-control form-control-sm mb-2" disabled value="default" />
                <table class="geog-categories">
                    <thead><tr><th>Category</th><th>Value</th><th>Default</th><th>Filename</th></tr></thead>
                    <tbody></tbody>
                </table>

            </div>
            <div class="modal-footer justify-content-between">
                <div>
                    <i class="fas fa-folder-open mr-1"></i><a href="http://www2.mmm.ucar.edu/wrf/src/wps_files/" target="_blank">http://www2.mmm.ucar.edu/wrf/src/wps_files/</a>
                </div>
                <div>
                    <button id="button-geog-save" type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Save</button>
                    <button id="button-geog-reset" type="button" class="btn btn-primary btn-sm">Reset</button>
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
    <div id="wps-save-dialog" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">namelist.wps</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" style="position: center">
                <textarea class="form-control resize-none font-namelist"></textarea>
            </div>
            <div class="modal-footer">
                <button id="button-download" type="button" class="btn btn-primary btn-sm" data-dismiss="modal"><i class="fas fa-download mr-1"></i>Download</button>
                <button id="button-copy" type="button" class="btn btn-primary btn-sm"><i class="fas fa-copy mr-1"></i>Copy</button>
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
    <div id="capture-image-dialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body d-flex">
                <div class="m-auto">Capturing image <i class="fas fa-spinner fa-spin"></i></div>
            </div>
        </div>
    </div>
</div>
    <div id="namelist-input-dialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-fullscreen" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <span class="navbar-brand">namelist.input</span>

                    <ul class="navbar-nav">

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</a>
                            <div class="dropdown-menu dropdown-namelist-input-view" aria-labelledby="dropdown-view">
                                <h6 class="dropdown-header">Groups</h6>
                                <a id="view-group-collapse-all" class="dropdown-item dropdown-selected" href="#"><i class="fas fa-check"></i><span class="ml-1">Collapse All</span></a>
                                <a id="view-group-expand-all" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Expand All</span></a>
                                <a id="view-group-show-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Show Unset</span></a>
                                <a id="view-group-hide-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Hide Unset</span></a>
                                <div class="dropdown-divider"></div>
                                <h6 class="dropdown-header">Variables</h6>
                                <a id="view-variables-show-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Show Unset</span></a>
                                <a id="view-variables-hide-unset" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Hide Unset</span></a>
                                <div class="dropdown-divider"></div>
                                <h6 class="dropdown-header">Views</h6>
                                <a id="view-all" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">All</span></a>
                                <a id="view-compact" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Compact</span></a>
                                <a id="view-min" class="dropdown-item" href="#"><i class="fas fa-check"></i><span class="ml-1">Minimized</span></a>
                            </div>
                        </li>

                    </ul>

                    <span class="navbar-text mr-1">Timezone:</span>
                    <form class="form-inline">
                        <select class="selectpicker" aria-label="Timezone" id="select-timezone" data-live-search="true"></select>
                    </form>

                    <span class="navbar-text mr-1 ml-2">Go To:</span>
                    <form class="form-inline">
                        <button class="btn btn-sm btn-outline-secondary" id="go-to-top" type="button" title="Go to Top"><i class="fas fa-angle-double-up"></i></button>
                        <select class="" aria-label="Group" id="go-to-group" data-live-search="true" title="Group"></select>
                        <select class="" aria-label="Group" id="go-to-variable" data-live-search="true" title="Variable"></select>
                    </form>

                </nav>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

                <ul class="nav nav-tabs" id="namelist-input-dialog-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button class="nav-link active" id="tab-namelist-input-editor" data-toggle="tab" data-target="#pane-namelist-input-editor" type="button" role="tab" aria-controls="pane-namelist-input-editor" aria-selected="true">Editor</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-namelist-input-text" data-toggle="tab" data-target="#pane-namelist-input-text" type="button" role="tab" aria-controls="pane-namelist-input-text" aria-selected="false">Text</button>
                      </li>
                    <li class="nav-item" role="presentation" style="display: none;">
                      <button class="nav-link" id="tab-namelist-input-errors" data-toggle="tab" data-target="#pane-namelist-input-errors" type="button" role="tab" aria-controls="pane-namelist-input-errors" aria-selected="false">Errors</button>
                    </li>
                    <li class="nav-item" role="presentation" style="display: none;">
                        <button class="nav-link" id="tab-namelist-input-original" data-toggle="tab" data-target="#pane-namelist-input-original" type="button" role="tab" aria-controls="pane-namelist-input-original" aria-selected="false">Original</button>
                      </li>
                      <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-namelist-input-info" data-toggle="tab" data-target="#pane-namelist-input-info" type="button" role="tab" aria-controls="pane-namelist-input-info" aria-selected="false">Documentation</button>
                      </li>
                  </ul>
                
                <div class="tab-content" id="namelist-input-dialog-tab-content">
                    <div class="tab-pane fade show active" id="pane-namelist-input-editor" role="tabpanel" aria-labelledby="tab-namelist-input-editor">
                        <div id="namelist-input-container" class="namelist-input-editor"></div>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-text" role="namelist-input-text" aria-labelledby="tab-namelist-input-text">
                        <textarea class="form-control font-namelist resize-none" readonly></textarea>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-errors" role="namelist-input-errors" aria-labelledby="tab-namelist-input-errors">
                        <div class="alert alert-info" role="alert">
                            A list of error(s) encountered while opening a namelist.input file. An error can happen, for example, when the file is not formatted correctly or contains unrecognized variables. To help improve this tool, please, consider reporting false-positives via the project's <a href="https://github.com/JiriRichter/WRFDomainWizard/issues" target="_blank">issues on GitHub</a>.
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <i class="fas fa-exclamation-circle text-danger"></i>
                                <span class="ml-1">Error</span>
                            </li>
                          </ul>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-original" role="namelist-input-original" aria-labelledby="tab-namelist-input-original">
                        <textarea class="form-control font-namelist resize-none" readonly></textarea>
                    </div>
                    <div class="tab-pane fade" id="pane-namelist-input-info" role="namelist-input-info" aria-labelledby="tab-namelist-input-info">
                        <div class="container">
                            <div class="my-2">
                                <h5>WRF Users Guide</h5>
                                <div class="list-group">
                                    <a href="https://www2.mmm.ucar.edu/wrf/users/wrf_users_guide/build/html/namelist_variables.html" class="list-group-item list-group-item-action" target="_blank">Namelist Variables</a>
                                </div>
                            </div>
                            <div class="my-2">
                                <h5>GitHub: wrf-model/WRF</h5>
                                <div class="list-group">
                                    <a href="https://github.com/wrf-model/WRF/tree/master/Registry" class="list-group-item list-group-item-action" target="_blank">Registry files</a>
                                    <a href="https://github.com/wrf-model/WRF/blob/master/run/README.namelist" class="list-group-item list-group-item-action" target="_blank">run/README.namelist</a>
                                    <a href="https://github.com/wrf-model/WRF/blob/master/test/em_real/examples.namelist" class="list-group-item list-group-item-action" target="_blank">test/em_real/examples.namelist</a>
                                </div>
                            </div>
                          </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="button-save" type="button" class="btn btn-primary btn-sm"><i class="far fa-save"></i><span class="ml-1">Save</span></button>
                <button id="button-copy" type="button" class="btn btn-primary btn-sm"><i class="fas fa-copy"></i><span class="ml-1">Copy</span></button>
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

    <script src="build/lib/jquery.min.js"></script>
    <script src="build/lib/bootstrap.bundle.min.js"></script>
    <script src="https://spin.js.org/spin.umd.js"></script>
    <script src="build/lib/immediate.min.js"></script>
    <script src="build/lib/proj4.js"></script>
    <script src="build/lib/leaflet.js"></script>
    <script src="build/lib/leaflet.spin.min.js"></script>
    <script src="build/lib/leaflet-sidebar.min.js"></script>
    <script src="build/lib/leaflet-providers.js"></script>
    <script src="build/lib/Blob.js"></script>
    <script src="build/lib/FileSaver.min.js"></script>
    <script src="build/lib/html-to-image.js"></script>
    <script src="build/lib/leaflet.textpath.js"></script>
    <script src="build/lib/moment.min.js"></script>
    <script src="build/lib/moment-timezone-with-data.min.js"></script>
    <script src="build/lib/bootstrap-datetimepicker.min.js"></script>
    <script src="build/lib/bootstrap-select.min.js"></script>

    <script src="build/js/wrf-domain-wizard.js"></script>
    <script>
        WRF.enableGlobalErrorHandler();
        var wizard = new WRF.DomainWizard({
            div: $('div#map'),
            jsonBaseUrl: 'build/json',
            sampleBaseUrl: 'build/samples'
        });
    </script>
</body>
</html>